<template>
    <div class='playsong'>
        <div class="auidocontnet">
            <audio  :src="audio.location" id="audioPlay" @timeupdate='updatetime' @canplay='canPlaySong'></audio>
            <div class="img" @click='showDetail'>
                <mu-circular-progress v-show="loading" :size="30"/>
                <img :src="audio.albumPic" alt="" v-show="!loading">
            </div>
            <div class="message">
                <div class="song-name">{{audio.name}}</div>
                <div class="singer">{{audio.singer}}</div>
            </div>
            <div class="control">
                <mu-icon-button class="mini-btn player-list" @click='showList'/>
                <mu-icon-button class="mini-btn player" :class="{pause: playing}" @click='toggleStatus'/>
                <mu-icon-button class="mini-btn next" @click='next'/>
            </div>
            <div class="progress">
                <div class="pro-load proload" :style="{'-webkit-transform':'translateX('+prBufferedTime+'%)' }"></div>
                <div class="pro-play proplay" :style="{'-webkit-transform':'translateX('+prCurrentTime+'%)' }"></div> 
            </div>
        </div>
        <BottomSheet ref='bottomSheet'></BottomSheet>
    </div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import BottomSheet from './showlist.vue'
    export default{
        data(){
            return{
                
            }
        },
        components:{
            BottomSheet
        },
        computed: {
            ...mapGetters([
                'audio',
                'change',
                'playing',
                'loading',
                'currentTime',
                'prBufferedTime',
                'tmpCurrentTime',
                'prCurrentTime'
            ])
        },
        methods:{
            canPlaySong () {
                this.$store.commit('closeLoading')
                this.$store.commit('play')
                document.getElementById('audioPlay').play()
            },
            toggleStatus(){
                if(this.playing){
                    this.$store.commit('pause')
                    document.getElementById('audioPlay').pause()
                }
                else{
                    this.$store.commit('play')
                    document.getElementById('audioPlay').play()
                }
            },
            next(){
                //要播放下一首先停止，获取歌曲列表然后切换歌曲列表数组的下标，赋值给audio标签的src
                //这里复用一下toggleStatus函数
                this.toggleStatus()
                this.$store.commit('playNext')
            },
            //更新进度条
            updatetime(){
                var vm =this
                var audioObj = document.getElementById('audioPlay')
                var time = parseInt(audioObj.currentTime)

                // 防止在未加载完成时，切歌出现的错误
                audioObj.onsuspend=function(){
                    if(audioObj.buffered.length>0 && audioObj.duration>0){
                        vm.$store.commit('updateBufferedTime', parseInt(audioObj.buffered.end(0)))
                    }
                }             
                vm.$store.commit('updateDurationTime', parseInt(audioObj.duration))
                if (this.change) {
                    audioObj.currentTime = this.tmpCurrentTime
                    this.$store.commit('setChange', false)
                } else {
                    this.$store.commit('updateCurrentTime', time)
                }
            },
            showList () {
                this.$refs.bottomSheet.show()
            },
            showDetail(){
                this.$router.push({name:'playerDetail',params:{id:this.audio.id}})
                this.$store.commit('toggleDetail')
            }
        }
    }
</script>
<style lang="less" scoped>
@import "../assets/less/comm.less";
    .playsong{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 998;
        .auidocontnet{
            width: 100%;
            height: 2.3rem;
            position: relative;
            background-color: hsla(0,0%,100%,.9);
            color: #333;
            .img{
                width: 2rem;
                height: 2rem;
                overflow: hidden;
                float: left;
                padding-left: 0.2rem;
                padding-top: 0.2rem;
                background-size: cover;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .message{
                overflow: hidden;
                position: relative;
                width: 7rem;
                float: left;
                padding-top: 0.2rem;
                padding-left: .3rem;
                .song-name{
                    font-size: .7rem;
                    line-height: 1rem;
                    overflow: hidden;
                    display: block;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .singer{
                    color: #8a8a8a;
                    font-size: .6rem;
                    overflow: hidden;
                    display: block;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
            .control{
                float: right;
                .mini-btn{
                    width: 2rem;
                    height: 2rem;
                }
            }
        }
    }
    /*列表按钮*/
  .player-list {
    background: url("../assets/images/playbar_btn_playlist.png") no-repeat!important;
    background-size: cover!important;
  }
  .player {
    background: url("../assets/images/playbar_btn_play.png") no-repeat!important;
    background-size: cover!important;
  }
  .pause {
    background: url("../assets/images/playbar_btn_pause.png") no-repeat!important;
    background-size: cover!important;
  }
  .next {
    background: url("../assets/images/playbar_btn_next.png") no-repeat!important;
    background-size: cover!important;
  }
  /*进度条*/
  .playsong .auidocontnet .progress {
    width: 100%;
    height: .1rem;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(255,255,255,.5);
  }
  .playsong .auidocontnet .pro-load, .playsong .auidocontnet .pro-play {
    width: 100%;
    height: .1rem;
    position: absolute;
    left: -100%;
  }
  .playsong .auidocontnet .pro-load {
    background-color: rgba(220, 217, 217, 1);
  }
  .playsong .auidocontnet .pro-play {
    background-color:  @primaryColor;
  }
</style>
